<template>
    <div class="container">
        <div class="two" style="margin-right: 20px;">
            <div class="tittle">爬虫1日志</div>
            <div class="txt">{{ textContent1 }}</div>
        </div>
        <div class="two">
            <div class="tittle">爬虫2日志</div>
            <div class="txt">{{ textContent2 }}</div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
const url = "logApi/task_scheduler.log";
const url2 = "logApi2/task_scheduler.log";


export default {
    data() {
        return {
            textContent1: '',
            textContent2: '',
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            const fn = async (url, key) => {
                const res = await axios.get(url, {
                    responseType: "blob",
                });
                let reader = new FileReader();
                reader.readAsText(res.data, 'GBK');
                // this.textContent = reader.result
                reader.onload = () => {
                    //文本行倒置
                    this[key] = reader.result.split('\n').reverse().join('\n');
                }
            }
            fn(url, 'textContent1')

            const fn2 = async (url2, key2) => {
                const res2 = await axios.get(url2, {
                    responseType: "blob",
                });
                let reader2 = new FileReader();
                reader2.readAsText(res2.data, 'GBK');
                // this.textContent = reader.result
                reader2.onload = () => {
                    //文本行倒置
                    this[key2] = reader2.result.split('\n').reverse().join('\n');
                }
            }
            fn2(url2, 'textContent2')

        },
        transformDataTxt() {
            return new Promise((resolve) => {
                let reader = new FileReader();
                reader.readAsText(data, 'GBK');
                reader.onload = () => {
                    resolve(reader.result)
                }
            })
        },

    }
}
</script>
<style>
.container {
    display: flex;
    padding: 20px;
    box-sizing: border-box;
}

.two {
    overflow-y: scroll;
    flex: 1;
}

.tittle {
    color: #222;
    font-size: large;
}

.txt {
    color: #222;
    height: 100%;
    /* 每句一行 */
    white-space: pre-wrap;

    /* 并排放置 */
    display: flex;
    box-sizing: border-box;
}
</style>
